<template>
    <div class="main">
        <section>
            <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>
            <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
                <el-table-column align="center" label="ID" prop="id" width="80">
                </el-table-column>
                <el-table-column align="center" label="用户名称" prop="username" width="130"></el-table-column>
                <el-table-column align="center" label="用户手机号" prop="mobile" width="130"></el-table-column>
                <el-table-column align="center" label="意见类型" width="130">
                    <template slot-scope="scope">
                        <span v-if="statusData.find(item => item.value === parseInt(scope.row.adviceStatus))">{{statusData.find(item => item.value === parseInt(scope.row.adviceStatus)).label}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="反馈内容" prop="content" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="反馈时间" prop="createdAt" width="160"></el-table-column>
                <el-table-column align="center" label="操作人" prop="lastOperatorNick" width="160"></el-table-column>
                <el-table-column align="center" label="操作时间" prop="lastOperatorTime" width="160"></el-table-column>
                <el-table-column align="center" label="操作" width="100" fixed="right" v-if="rightsButtons['view']">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="showDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    v-if="paginationShow"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageNo"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
            <el-dialog title="查看反馈" :visible.sync="dialogVisible" :modal-append-to-body="false">
                <el-row>
                  <el-col :span="8">
                    <div class="advice-detail-item">
                        <div class="label">反馈用户：</div>
                        <div class="value">{{detail.username}}</div>
                    </div>
                    <div class="advice-detail-item">
                        <div class="label">用户手机：</div>
                        <div class="value">{{detail.mobile}}</div>
                    </div>
                    <div class="advice-detail-item">
                        <div class="label">意见类型：</div>
                        <div class="value" v-if="statusData.find(item => item.value === parseInt(detail.adviceStatus))">{{statusData.find(item => item.value === parseInt(detail.adviceStatus)).label}}</div>
                    </div>
                    <div class="advice-detail-item">
                        <div class="label">反馈时间：</div>
                        <div class="value">{{detail.createdAt}}</div>
                    </div>
                    <div class="advice-detail-item">
                        <div class="label">反馈内容：</div>
                        <div class="value">{{detail.content}}</div>
                    </div>
                    <div class="advice-detail-item">
                        <div class="label">图片：</div>
                        <div class="value" v-if="detail.pic">
                            <viewer :images="detail.pic.split(',')">
                                <img v-for="(item, index) in detail.pic.split(',')" :src="item" :key="index">
                            </viewer>
                        </div>
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <el-form :model="adviceData" ref="form" :rules="commonRules" label-width="100px">
                      <el-form-item  label="操作人：" class="sendFormItem">
                        <span>{{adviceData.operatorNick}}</span>
                      </el-form-item>
                      <el-form-item  label="操作时间：" class="sendFormItem" >
                          <span>{{adviceData.operatorTime}}</span>
                      </el-form-item>
                      <el-form-item  label="状态："   class="sendFormItem">
                          <span>{{adviceData.id?'已发送':'未发送'}}</span>
                      </el-form-item>
                      <el-form-item  label="内容" prop="content" :rules="commonRules.notNullRule"  class="sendFormItem">
                          <el-input type="textarea" v-model="adviceData.content"  :disabled="this.adviceData.id ? true : false"/>
                      </el-form-item>
                      <el-form-item v-if="rightsButtons['operate']">
                        <el-button @click="sendAdvice" style="margin-top:20px">{{this.adviceData.id ? '撤回' : '发送'}}</el-button>
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>
               
                <!-- <el-button @click="dialogVisible = false">确定</el-button> -->
               
            </el-dialog>
        </section>
    </div>
</template>
<script>
    import { getAdviceList } from '../../../api/advice'
    import searchForm from '../../../components/searchForm/index'
    export default {
      name: 'adviceList',
      components: {
        searchForm
      },
      data(){
        let statusData = [
          {
            label: '全部',
            value: 6
          },
          {
            label: '订单与支付问题',
            value: 0
          },
          {
            label: '商品问题',
            value: 1
          },
          {
            label: '服务态度',
            value: 2
          },
          {
            label: '找不到想要的',
            value: 3
          },
          {
            label: 'App体验',
            value: 4
          },
          {
            label: '其它',
            value: 5
          }
        ];
        return {
          statusData,
          paginationShow: false,
          listQuery: {
            pageNo: 1,
            pageSize: 10,
            startTime: '',
            endTime: '',
            status: 6,
            userInfo: '',

            createDate: []
          },
          queryConfig: [
            {
              prop: 'createDate',
              type: 'daterange',
              label: '反馈时间'
            },
            {
              prop: 'status',
              type: 'select',
              label: '意见类型',
              data: statusData
            },
            {
              prop: 'userInfo',
              type: 'input',
              label: '提交用户',
              placeholder: '用户名称/用户手机号'
            }
          ],
          listLoading: false,
          list: [],
          listTotal: 0,

          detail: {},
          dialogVisible: false,
          adviceData:{
            content:'',
            operatorId:'',
            operatorNick:'',
            operatorTime:'',
            welfareAdviceId:'',
            id:''
          }
        }
      },
      created(){
        this.fetchData()
      },
      methods: {
        fetchData(){
          let tFlag = this.listQuery.createDate && this.listQuery.createDate.length;
          this.listQuery.startTime = tFlag ? this.listQuery.createDate[0]+' 00:00:00':'';
          this.listQuery.endTime = tFlag ? this.listQuery.createDate[1]+' 23:59:59':'';
          getAdviceList(this.listQuery)
            .then(({ data }) => {
              this.list = data[0].content
              this.listTotal = data[0].totalElements
              this.paginationShow = true
            })
            .catch(e => {
              this.list = []
              this.listTotal = 0
              this.paginationShow = true
              console.log(e)
            })
        },
        search () {
          this.listQuery.pageNo = 1;
          this.fetchData();
        },
        handleSizeChange (value) {
          this.listQuery.pageSize = value;
          this.fetchData();
        },
        handleCurrentChange (value) {
          this.listQuery.pageNo = value;
          this.fetchData();
        },
        showDetail(item){
          this.detail = item
          this.getAdvice()
          this.dialogVisible = true
        },
        getAdvice() {
          this.request({
            url:'/upgrade/app/welfareAdviceReply/get',
            method: 'get',
            params: {welfareAdviceId: this.detail.id}
          }).then((res) =>{
            if(res.code===200){
              this.adviceData.welfareAdviceId = res.data.welfareAdviceId
              if(res.data.id) {
                this.adviceData.id = res.data.id
                this.adviceData.content = res.data.content
              } else {
                this.adviceData.id = ''
                this.adviceData.content = ''
              }
              if(res.data.content) {
                this.adviceData.operatorNick = res.data.operatorNick  
                this.adviceData.operatorTime = res.data.operatorTime
              } else {
                this.adviceData.operatorNick = '' 
                this.adviceData.operatorTime = ''
              }
            }
          })
        },
        sendAdvice() {
          this.$refs.form.validate(valid => {
            if(valid) {
              this.$confirm('是否继续该操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let urlAdvice = this.adviceData.id ? '/upgrade/app/welfareAdviceReply/delete' : '/upgrade/app/welfareAdviceReply/add'
              this.adviceData.operatorNick = this.$store.getters.user.realname  
              this.adviceData.operatorTime = this.formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
              this.request({
                url: urlAdvice,
                method: this.adviceData.id ? 'delete' : 'post',
                data: this.adviceData
              }).then((res) =>{
                if(res.code===200){
                  this.dialogVisible = false
                  this.$message.success('操作成功！')
                  this.fetchData()
                } 
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })          
            })
            }
          }) 
        }
      }
    }
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .advice-detail-item{
        @include flex;
        line-height: 36px;
        .label{
            width: 100px;
            text-align: right;
        }
        .value{
            @include sub-item;

            img{
                max-width: 100px;
                height: 100px;
                margin-right: 10px;
                cursor: pointer;
            }
        }
    }
    .sendFormItem{
      margin-bottom: 0;
      label{
        font-weight: normal
      }
    }
</style>
